<template>
  <div>
    <div class="title font14 clearfix ma30-15">
      <p class="fl">{{ ruleForm.title }}</p>

      <div class="fr">
        <el-button
          type="text"
          class="primary1 fsxx"
          @click="sendMsgToOne('', '所有的参与人员')"
          v-if="teamuserPageInfo.total > 0"
          >发送消息</el-button
        >
      </div>
    </div>
    <div class="pa15 bor7 group">
      <!-- 内容 -->
      <div class="table-responsive">
        <table class="table">
          <tbody>
            <tr>
              <th>时间</th>
              <th>发送人</th>
              <th>接收人</th>
              <th>消息类型</th>
              <th>消息详情</th>
              <!--th>操作</th-->
            </tr>
            <tr v-for="item in this.defaultList" :key="item.id">
              <td>{{ item.create_time | formatDate }}</td>
              <td>{{ item.user.nickname }}</td>
              <td>{{ item.receivers_names }}</td>
              <td>{{ item.title }}</td>
              <td class="line1 w40">{{ item.content | contentText }}</td>
              <!--td>
                <el-button
                  type="text"
                  class="primary"
                  @click="dialogVisible = true"
                  >详情</el-button
                >
              </td-->
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 列表详情弹出开始 -->
      <div class="list_info">
        <el-dialog
          title="消息详情"
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleClose"
        >
          <div>
            <div class="text">发送给：xxxx</div>
            <div class="text">消息详情</div>
            <div class="textarea">这里是消息详情</div>
          </div>
        </el-dialog>
      </div>
      <!-- 列表详情弹出结束 -->
      <!-- 发送消息弹出开始 -->
      <div class="list_info">
        <el-dialog
          title="消息详情"
          :visible.sync="dialogVisible1"
          width="40%"
          :before-close="handleClose"
        >
          <div>
            <div class="text">
              发送给：<span style="color: #de5044">所有的参与人员</span>
            </div>
            <div class="text">消息详情</div>
            <div class="textarea">
              <textarea v-model="msg" id=""></textarea>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <div class="ta">
              <el-button type="primary fsxx" @click="sendMsg()">发送</el-button>
            </div>
          </span>
        </el-dialog>
      </div>
      <!-- 发送消息弹出结束 -->
      <!-- 分页 -->
      <div class="block ta">
        <el-pagination
          layout="  prev, pager, next "
          :page-size="page_size"
          @current-change="current_change"
          :current-page.sync="currentPage"
          :pager-count="5"
          :total="info.total"
          v-if="info.pages > 1"
        >
        </el-pagination>
        <el-empty description="暂无数据" v-if="info.total == 0"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "../../assets/data.js";
export default {
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },

  },
  data() {
    return {
      dialogVisible: false, //列表详情弹出
      dialogVisible1: false, //发送消息弹出
      isActive: 1,
      info: [], //数据
      ruleForm: [], //活动数据
      sendname: "所有的参与人员",
      msg: "",
      teamuserList: [], //选中的主持人
      teamuserPageInfo: [], //选中的主持人、分页
      page_size: 8, //每页多少数据
      currentPage: 1, //默认当前页为第一页
      sort: "id",
      keyword: "",
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      visible5: false,
      visible6: false,
      visible7: false,
    };
  },
  mounted() {
    this.getAllList();
    this.getInfo();
  },
  methods: {
    getteamuserList(team_id) {
      var that = this;
      this.$axios
        .get(
          this.$api + "//api/team/teamuser?team_id=" + team_id + "&nickname="
        )
        .then(function (response) {
          that.teamuserList = response.data.data.data;
          that.teamuserPageInfo = response.data.data;
          //console.log("teamuserPageInfo", that.teamuserPageInfo);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    //发送单人
    sendMsgToOne(user_id, nickname) {
      this.dialogVisible1 = true;
      this.ruleForm.receive_type = "one";
      this.sendname = nickname;
      this.ruleForm.receive_id = user_id;
    },
    //发送消息
    sendMsg() {
      var that = this;
      var url = this.$api + "/api/activitymessage/add";

      if (this.sendname == "所有的参与人员") {
        this.ruleForm.receive_id = "";
        this.ruleForm.receive_type = "all";
      } else {
        this.ruleForm.receive_type = "one";
      }

      if (this.teamuserPageInfo.total == 0) {
        that.$message.error("暂无人员加入");
        return false;
      }

      if (!this.msg) {
        that.$message.error("消息不能为空");
        return false;
      }

      var jsons = {
        activity_id: this.$route.query.id,
        content: this.msg,
        type: this.ruleForm.receive_type,
        receive_id: this.ruleForm.receive_id,
      };

      this.$axios
        .post(url, jsons)
        .then((res) => {
          //console.log(res.data);
          if (res.data.code == 1) {
            that.$message({
              message: res.data.msg,
              type: "success",
            });
            that.dialogVisible1 = false;
          } else {
            that.$message.error(res.data.msg);
          }
        })
        .catch((Error) => {
          //console.log(Error);
          that.$message.error(Error);
        });
    },
    getAllList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/activitymessage/index?page_no=" +
            that.currentPage +
            "&page_size=" +
            that.page_size +
            "&sort=" +
            that.sort +
            "&order=desc&search=activity_id:" +
            this.$route.query.id +
            ";"
        )
        .then(function (response) {
          that.defaultList = response.data.data.data;
          that.info = response.data.data.page;
          ////console.log(that.defaultList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getInfo() {
      if (!this.$route.query.id) {
        return false;
      }
      var that = this;
      this.$axios
        .get(this.$api + "//api/activity/detail?id=" + this.$route.query.id)
        .then(function (response) {
          that.ruleForm = response.data.data;
          that.getteamuserList(that.ruleForm.team_id);
          //console.log(that.ruleForm);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    current_change(currentPage) {
      //改变当前页
      this.currentPage = currentPage;
      this.getAllList();
    },
    defaultSearch() {
      ////console.log(this.keyword);
      this.getAllList();
    },
  },
};
</script>
<style>
.list_info .el-dialog__header {
  padding-bottom: 20px !important;
  border-bottom: 1px solid #ddd !important;
}
.list_info .text {
  color: #000;
}
.list_info .el-dialog__body {
  padding: 20px;
}
.list_info .el-dialog__headerbtn .el-dialog__close {
  font-size: 20px;
}
.list_info .textarea {
  width: 100%;
  height: 300px;
  border: 1px solid #ddd;
  margin-top: 15px;
  padding: 15px;
  color: #000;
  line-height: 26px;
}
.list_info .textarea textarea {
  width: 100%;
  height: 100%;
  border: none;
}
</style>
<style scoped>
.w40 {
  width: 40%;
}
.fsxx {
  padding: 0.75rem 0 !important;
  width: 7.5rem;
}
.fsxx:hover {
  background: #fff !important;
  color: #4285f4 !important;
}
.ma30-15 p.fl {
  line-height: 2.5rem;
}
html {
  height: 100% !important;
  overflow-y: hidden !important;
}
.table th {
  border-top: none;
  background: #f6f5f5;
  font-size: 0.875rem;
  color: #545556;
  line-height: 3.4375rem !important;
  text-align: center;
  font-size: 0.875rem;
}
table tr td {
  line-height: 3.4375rem !important;
  text-align: center;
  font-size: 0.875rem;
}
.el-button--info {
  border-radius: 0.25rem;
  background: #f6f5f5;
  border: 1px solid #f6f5f5;
  color: #545556;
}
.el-button {
  padding: 0.3125rem 0.625rem;
  font-size: 0.875rem;
}
.table > tbody > tr > td {
  border-top: 1px solid #f6f5f5;
}
.el-button + .el-button {
  margin-left: 0.25rem;
}
.el-button--success {
  background: #19a15f;
}
.el-radio {
  margin-right: 0.5rem;
}
.el-radio__label {
  font-size: 0.875rem;
  padding-left: 0.3125rem;
}
tr .free {
  color: #de5044;
}
.table tr img {
  width: 3.4375rem;
  object-fit: cover;
}
.el-button--warning {
  background: #ffce45;
  border-color: #ffce45;
}
</style>
